<template>
  <div>
    <a-card>
      <a-row>
        <a-col :span="9">
          <a-button type="primary" @click="handleSubmit">
            提现
          </a-button></a-col
        >
      </a-row>
      <a-row
        >
        <a-col :span="24">
          <div class="footer">
            <a-col :span="6"
              ><span>总佣金：{{ commissionAmt | numberTwo }}</span> 元</a-col
            >
            <a-col :span="6">
              <span>可提现：{{ notCashOutAmt | numberTwo }}</span> 元</a-col
            >
            <a-col :span="6">
              <span>已提现：{{ cashOutAmt | numberTwo }}</span> 元</a-col
            >
          </div>
        </a-col>
        </a-row
      >

      <a-table
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        :columns="columns"
        :data-source="data"
        :scroll="{ x: 1500 }"
        :rowKey="(record) => record.id"
        :pagination="{
          total: Number(this.total),
          showSizeChanger: true,
          showQuickJumper: true,
          current: Number(this.current),
          pageSize: Number(this.pageSize),
          size: 'small',
          pageSizeOptions: ['5', '10', '25', '50'],
          onChange: handleTableChange,
          onShowSizeChange: handleTableChange,
          showTotal: (total) => `总计 ${total} 条交易记录`,
        }"
        :loading="loading"
      >
      </a-table>
    </a-card>
    <a-modal
      title="提现申请"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      :destroyOnClose="true"
    >
      <a-row>
        <a-col :span="18">
          <a-tooltip placement="topLeft" title="提现金额需为整数，且为100的整数倍，否则可能会导致提现失败！">
            <span style="fontWeight:600;fontSize:16px">提现金额 <a-icon type="question-circle-o" />：</span>
          </a-tooltip>
          <a-input-number
            :min="100"
            :step="100"
            :max="100000"
            style="width: 200px"
            v-model="appluMoney"
            :formatter="(value) => `${value}`.replace(/^(0+)|[^\d]+/g, '')"
            :parser="(value) => value.replace(/^(0+)|[^\d]+/g, '')"
            placeholder="请输入提现金额！"
          />
        </a-col>
        <!-- <a-col :span="4">
          <a-button type="primary" @click="handleClick"
            >全部提现</a-button
          ></a-col
        > -->
      </a-row>
      <div>
        <span class="question"><a-icon type="question-circle-o" />&nbsp;每人每月只能申请一次提现，如有特别情况请联系管理员！ </span>
      </div>
    </a-modal>
  </div>
</template>

<script>
import dayjs from "dayjs";
import axios from "axios";
import {
  getTransaction,
  getByDisNo,
  applyCashOut,
} from "../../services/dataSource";
export default {
  name: "sss",
  components: {},
  props: {},
  filters: {
    numberTwo(number) {
      return (number = Math.floor(number * 100) / 100);
    },
  },
  data() {
    return {
      disbName: "",
      loading: false,
      disbNO: "",
      memberID: "",
      bankAccount: "",
      visible: false,
      pagination: {},
      tradeIds: [], //订单id
      accountNum: "", //银行账户
      selectedRowKeys: [], // Check here to configure the default column
      current: 1,
      pageSize: 10,
      total: 0,
      appluMoney: 100,
      totalMoney: 0,
      //佣金
      commissionAmt: 0,
      //已提现
      cashOutAmt: 0,
      //未体现
      notCashOutAmt: 0,
      //   表格数据
      columns: [
        {
          title: "序号",
          key: "index",
          align: "center",
          width: 80,
          customRender: function(_, __, i) {
            return i + 1;
          },
        },
        {
          title: "会员昵称",
          dataIndex: "tMember",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return record.tMember.nickname;
          },
        },
        {
          title: "会员城市",
          dataIndex: "city",
          align: "center",
          width: 120,
          customRender: (text, record) => {
            return record.tMember.city;
          },
        },
        {
          title: "订单编号",
          dataIndex: "orderNo",
          key: "orderNo",
          align: "center",
          width: 150,
          scopedSlots: { customRender: "name" },
        },
        {
          title: "交易数量",
          dataIndex: "tradeQty",
          key: "tradeQty",
          align: "center",
          width: 120,
        },
        {
          title: "交易金额",
          dataIndex: "tradeAmt",
          key: "tradeAmt",
          align: "center",
          width: 120,
        },
        {
          title: "佣金",
          dataIndex: "commission3",
          key: "commission3",
          align: "center",
          width: 100,  
        },
        {
          title: "提现状态",
          dataIndex: "isCashOut",
          align: "center",
          width: 150,
          customRender: function(text) {
            return text == false ? (
              <span style="color:green">未提现</span>
            ) : (
              <span style="color:red">已提现</span>
            );
          },
        },
        {
          title: "交易时间",
          dataIndex: "creationTime",
          customRender: function(text) {
            return dayjs(text).format("YYYY-MM-DD hh:mm:ss");
          },
        },
      ],
      data: [],
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
      },
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  watch: {},
  methods: {
    //全部提现
    handleClick() {
      if (this.notCashOutAmt > 0) {
        this.appluMoney = parseInt(this.cashOutAmt);
      }
    },
    // 提现确定
    handleSubmit() {
      if (this.bankAccount == "null") {
        return (
          this.$message.info("信息不完善，将前往完善信息"),
          this.$router.push("company")
        );
      }
      this.visible = true;
    },
    handleOk() {
      if (this.appluMoney > this.notCashOutAmt) {
        return this.$message.warning("金额不足！");
      }
      if (this.appluMoney <= 0) {
        return this.$message.warning("请输入申请金额！");
      }
      if (this.appluMoney >= 100000) {
        return this.$message.warning("申请金额超出最大限度！");
      }
      if(this.appluMoney % 100 !== 0){
        return this.$message.warning("请输入正确的金额！");
      }
      axios({
        method: "POST",
        url: `http://124.71.234.61:21021/api/services/app/Edu_Distributor/ApplyCashOut?disNo=${this.disbNO}&money=${this.appluMoney}`,
      })
        .then((res) => {
          if (res.data.success == true) {
            this.$message.success("提现申请成功！");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleCancel() {
      this.visible = false;
      this.appluMoney = 0;
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.tradeIds = this.selectedRowKeys;
    },
    //切换页面
    handleTableChange(pageNumber, pageSize) {
      this.current = pageNumber;
      this.pageSize = pageSize;
      this.getData();
    },
    // 获取数据
    getData() {
      getTransaction(
        this.disbNO,
        (this.current - 1) * this.pageSize,
        this.pageSize
      )
        .then((res) => {
          this.data = res.data.result.trades ? res.data.result.trades : [];
          this.total = res.data.result.totalCount;
          this.loading = false;
          this.data.forEach((item) => {
            this.totalMoney += item.tradeAmt;
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取分销商
    getByDisNo() {
      getByDisNo(this.disbNO).then((res) => {
        (this.commissionAmt = res.data.result.commissionAmt),
          (this.cashOutAmt = res.data.result.cashOutAmt),
          (this.notCashOutAmt = res.data.result.notCashOutAmt);
      });
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    this.disbName = window.localStorage.getItem("disbName");
    this.disbNO = window.localStorage.getItem("disbNO");
    this.memberID = window.localStorage.getItem("memberID");
    this.bankAccount = window.localStorage.getItem("bankAccount");
    this.getData();
    this.getByDisNo();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
.box {
  margin-bottom: 16px;
  display: flex;
}
.ipt {
  display: inline-block;
  width: 250px;
}
.text {
  margin-left: 50px;
  margin-right: 10px;
  font-size: 18px;
  font-weight: 700;
}
.footer {
  font-size: 16px;
  color: #000;
  font-weight: 600;
  width: 100%;
  height: 30px;
  margin: 16px auto;
}
.question{
  font-size:12px;
  color:gray;
}
</style>
